:root {
  --desktop-main-width: 414px;
}

::-webkit-scrollbar {
  display: none;
}

html {
  box-sizing: border-box;
  user-select: none;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

a {
  color: inherit;
  text-decoration: none;
}

#app {
  width: inherit;
  height: inherit;
  overflow: auto;
}

video.viewer-video {
  width: inherit;
  height: inherit;
  object-fit: contain;

  &.in-card {
    object-fit: cover;
    border-radius: 0.625rem;
  }
}

.v-dialog--fullscreen > .v-overlay__content {
  border-radius: 1.875rem;
  top: 13.31rem;
}

/**
 * gradient background start
 */
.primary-gradient {
  background: linear-gradient(
    180deg,
    rgb(var(--v-theme-primary-gradient-from)) 0%,
    rgb(var(--v-theme-primary-gradient-to)) 100%
  );
  box-shadow: 0rem 0rem 0.4375rem 0rem rgba(255, 15, 0, 0.68);
}
/**
 * gradient background end
 */

.primary-gradient-disable {
  background: linear-gradient(
    180deg,
    rgb(var(--v-theme-primary-gradient-from), 0.5) 0%,
    rgb(var(--v-theme-primary-gradient-to), 0.5) 100%
  ) !important;
  box-shadow: 0rem 0rem 0.4375rem 0rem rgba(255, 15, 0, 0.68) !important;
}

.promotion-gradient {
  background: linear-gradient(
    0deg,
    rgb(var(--v-theme-promotion-gradient-from)) -136.67%,
    rgb(var(--v-theme-promotion-gradient-to)) 136.67%
  );
  box-shadow: 0px 0px 7px 0px rgba(143, 0, 155, 0.83);
}

.promotion-gradient-disable {
  background: linear-gradient(
    0deg,
    rgb(var(--v-theme-promotion-gradient-from), 0.5) -136.67%,
    rgb(var(--v-theme-promotion-gradient-to), 0.5) 136.67%
  );
  box-shadow: 0px 0px 7px 0px rgba(143, 0, 155, 0.83);
}

.primary-btn-disable {
  background-color: rgba($color: #f42c52, $alpha: 0.5) !important;
}

/**
 *  button start
 */
%btn {
  min-height: 1.875rem;
  padding: 0 1rem;
  border-radius: 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;

  &:disabled {
    opacity: 0.5;
  }
}

.personal-btn {
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;

  svg {
    margin-right: 0.3125rem;
  }
}

.primary-btn {
  @extend %btn;
  background-color: rgb(var(--v-theme-primary));
  color: #fff;
}

.cancel-btn {
  @extend %btn;
  background-color: rgb(var(--v-theme-background));
  color: #fff;
}

.cancel-light-btn {
  @extend %btn;
  background-color: rgb(var(--v-theme-surface));
  color: #fff;
}

.hollow-btn {
  @extend %btn;
  border: 1px solid rgb(var(--v-theme-primary));
  color: rgb(var(--v-theme-primary));
}
/**
 * button end
 */

// Animation
.ping {
  position: absolute;
  width: 0.3125rem;
  height: 0.3125rem;

  &:before {
    content: '';
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: rgb(var(--v-theme-primary));
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }

  &:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--v-theme-primary));
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }
  80%,
  100% {
    opacity: 0;
  }
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}

/**
 * font styles start
 * font-size
 * font-weight
 * font-style
 * line-height
 */
$font-size-values: (
  8: 0.5rem,
  10: 0.625rem,
  12: 0.75rem,
  14: 0.875rem,
  16: 1rem,
  18: 1.125rem,
  20: 1.25rem,
  22: 1.375rem,
  24: 1.5rem,
  26: 1.625rem,
);

.font-size {
  @each $px, $rem in $font-size-values {
    &-#{$px} {
      font-size: $rem;
      line-height: 100%;
      font-style: normal;
    }
  }
}

$font-weight-values: (
  400: 400,
  500: 500,
  600: 600,
);

.font-weight {
  @each $key, $val in $font-weight-values {
    &-#{$key} {
      font-weight: $val;
    }
  }
}

$line-height: (
  75: 75%,
  875: 87.5%,
  100: 100%,
  120: 120%,
  125: 125%,
  135: 135%,
  140: 140%,
  150: 150%,
);

.line-height {
  @each $key, $val in $line-height {
    &-#{$key} {
      line-height: $val;
    }
  }
}

$font-style: (
  normal: normal,
  italic: italic,
  oblique: oblique,
  inherit: inherit,
  initial: initial,
  unset: unset,
);

.font-style {
  @each $key, $val in $line-height {
    &-#{$key} {
      font-style: $val;
    }
  }
}

$letter-spacing: (
  dot2: 0.0125rem,
);
.letter-spacing {
  @each $key, $val in $letter-spacing {
    &-#{$key} {
      letter-spacing: $val;
    }
  }
}
/**
 *  font styles end
 */

/**
 *  flex gap 兼容 start
 *
 *  <flexbox class="gap-row-16">
 *    <flexitem></flexitem>
 *    <flexitem></flexitem>
 *    <flexitem></flexitem>
 *  </flexbox>
 */
$gap-values: (
  2: 0.125rem,
  3: 0.1875rem,
  4: 0.25rem,
  5: 0.3125rem,
  6: 0.375rem,
  7: 0.4375rem,
  8: 0.5rem,
  10: 0.625rem,
  12: 0.75rem,
  16: 1rem,
  20: 1.25rem,
  22: 1.375rem,
  24: 1.5rem,
  28: 1.75rem,
  30: 1.875rem,
  32: 2rem,
  36: 2.25rem,
  48: 3rem,
  52: 3.25rem,
  57: 3.5625rem,
  74: 4.625rem,
);

.gap-row {
  @each $px, $rem in $gap-values {
    &-#{$px} > *:not(:last-child) {
      margin-right: $rem;
    }
  }
}

.gap-col {
  @each $px, $rem in $gap-values {
    &-#{$px} > *:not(:last-child) {
      margin-bottom: $rem;
    }
  }
}
/**
 *  flex gap 兼容 end
 */

$flex-direction: (
  row: row,
  row-rever: row-reverse,
  col: column,
  col-rever: column-reverse,
);

.flex {
  @each $key, $val in $flex-direction {
    &-#{$key} {
      flex-direction: $val;
    }
  }
}

.flex {
  display: flex;
}

$scale: (
  fifth: 20%,
  quarter: 25%,
  third: 33.3333%,
  half: 50%,
  two-thirds: 66.6667%,
  three-quarters: 75%,
  full: 100%,
);

.w {
  @each $key, $val in $scale {
    &-#{$key} {
      width: $val;
    }
  }
}

.h {
  @each $key, $val in $scale {
    &-#{$key} {
      height: $val;
    }
  }
}

.v-icon {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
}

$icon-size: (
  4: 0.25rem,
  8: 0.5rem,
  10: 0.625rem,
  12: 0.75rem,
  14: 0.875rem,
  16: 1rem,
  17: 1.0625rem,
  18: 1.125rem,
  20: 1.25rem,
  24: 1.5rem,
  27: 1.6875rem,
  28: 1.75rem,
  30: 1.875rem,
  32: 2rem,
  36: 2.25rem,
  40: 2.5rem,
  44: 2.75rem,
  50: 3.125rem,
  54: 3.375rem,
  75: 4.6875rem,
  84: 5.25rem,
  104: 6.5rem,
  109: 6.8125rem,
);

.icon-size {
  @each $key, $value in $icon-size {
    &-#{$key} {
      width: $value;
      height: $value;
      font-size: $value;
    }
  }
}

$tail-size: (
  4: 0.25rem,
  8: 0.5rem,
  10: 0.625rem,
  12: 0.75rem,
  16: 1rem,
  17: 1.0625rem,
  20: 1.25rem,
  24: 1.5rem,
  27: 1.6875rem,
  28: 1.75rem,
  32: 2rem,
  40: 2.5rem,
  48: 3rem,
  50: 3.125rem,
  75: 4.6875rem,
  84: 5.25rem,
  96: 6rem,
  104: 6.5rem,
  109: 6.8125rem,
  320: 20rem,
);

.tail-size {
  @each $key, $value in $tail-size {
    &-#{$key} {
      height: $value;
    }
  }
}

.pointer {
  cursor: pointer;
}

.v-select__content {
  max-width: 15rem !important;
}

.v-select__z-index {
  z-index: 3001 !important;
}

.v-menu__z-index {
  z-index: 2500 !important;
}

.pre-line {
  white-space: pre-line;
}

.nowrap {
  white-space: nowrap;
}

// 用來墊高被Navbar擋住的部分
.escape-nav {
  margin-bottom: 5rem;
}
